<template>
	<!-- 图文导航 -->
	<view :class="datas.imageList.length > 4 ? 'graphicnavigations' : 'graphicnavigation'" :style="getStyle">
		<!-- 默认导航 -->
		<!-- <section class="defaultNavigation" v-if="!datas.imageList[0]" :style="{
		  background: datas.backgroundColor,
		  display: datas.imgStyle === 0 ? 'flex' : '-webkit-box',
		  'overflow-x': datas.imgStyle === 0 ? '' : 'scroll',
		}">

			导航
			<view class="navigationList" @click="click(index)" v-for="index in 5" :key="index" :style="{
				width: datas.imgStyle === 0 ? 'auto' : 375 / datas.showSize - 1 + 'px',
				backgroundColor:datas.itembgColor,
			}">
				图片
				<image src="@/static/imgs.png" alt="默认图片" v-show="datas.navigationType === 0"
					:style="{ 'border-radius': datas.borderRadius + '%' }" />
				文字
				<text :style="{ color: datas.textColor }">导航</text>
			</view>
		</section> -->

		<!-- 导航列表 -->
		<!--  v-else -->
		<!-- background: datas.backgroundColor, -->

		<section class="defaultNavigation" :style="{
			display: datas.imgStyle === 0 ? 'flex' : '-webkit-box',
			'flex-wrap': datas.imgStyle === 0 ? 'wrap' : 'nowrap',
			'justify-content':
			datas.imgStyle === 0 ? 'space-evenly' : 'space-around',
			'overflow-x': datas.imgStyle === 0 ? '' : 'scroll',
		}">

			<!-- 导航 -->
			<view class="navigationList" @click="click(index)" v-if="datas.titleType === 'down'"
				:class="datas.titleType=='left' || datas.titleType=='right'?'LR_title':''"
				v-for="(item, index) in datas.imageList" :key="index" :style="[get_navstyle(item)]">

				<view v-if="datas.titleType== 'up' || datas.titleType== 'left'">
					<text :style="{color: datas.textColor, textAlign:datas.titleType=='left'?'left':'center',
					'font-size': datas.textSize + 'px', height: datas.textHeight + 'px', 'line-height': datas.textHeight + 'px',
				}">{{ item.text }}</text>

					<text class="title2"
						v-if="datas.title2=='1' && (datas.titleType === 'up' || datas.titleType== 'left')" :style="{
						color: datas.text2Color,
						textAlign:datas.titleType=='left'?'left':'center',
						'font-size': datas.text2Size + 'px',
						height: datas.text2Height + 'px',
						'line-height': datas.text2Height + 'px',
					}">{{ item.text2 }}</text>

				</view>

				<!-- 所有的图片 -->
				<uni-badge text="1" :text="item.badge" absolute="rightTop" :offset="badge_xy">
					<image :src="item.src" alt="默认图片" v-show="datas.navigationType === 0"
						:style="{ 'border-radius': datas.img_borderRadius + '%' , 'width': datas.imgSize + 'vh', 'height': datas.imgSize + 'vh'  }" />
				</uni-badge>
				<!-- <image v-else :src="item.src" alt="默认图片" v-show="datas.navigationType === 0"
			 			:style="{ 'border-radius': datas.img_borderRadius + '%' , 'width': datas.imgSize + 'vh', 'height': datas.imgSize + 'vh'  }" />
			-->
				<!-- 文字 -->
				<view v-if="datas.titleType === 'down'">
					<text :style="{
						color: datas.textColor,
						textAlign:datas.titleType=='right'?'left':'center',
						'font-size': datas.textSize + 'px',
						height: datas.textHeight + 'px',
						'line-height': datas.textHeight + 'px',
					}">{{ item.text }}</text>

					<text class="title2" :style="{
						color: datas.text2Color,
						textAlign:datas.titleType=='right'?'left':'center',
						'font-size': datas.text2Size + 'px',
						height: datas.text2Height + 'px',
						'line-height': datas.text2Height + 'px',
					}" v-if="datas.title2=='1' && (datas.titleType === 'down' || datas.titleType === 'right')">{{ item.text2 }}</text>
				</view>

			</view>

			<view class="navigationList1" @click="click(index)" v-if="datas.titleType === 'right'"
				:class="datas.titleType=='left' || datas.titleType=='right'?'LR_title1':''"
				v-for="(item, index) in datas.imageList" :key="index" :style="[get_navstyle(item)]">

				<!-- 所有的图片 -->
				<!-- <uni-badge text="1" :text="item.badge" absolute="rightTop" :offset="badge_xy"> -->

				<image :src="item.src" alt="默认图片" v-show="datas.navigationType === 0"
					style="width: 120rpx; height: 80rpx; padding: 2rpx 0 7rpx 25rpx"
					:style="{ 'border-radius': datas.img_borderRadius + '%' }" />

				<!-- </uni-badge> -->
				<!-- <image v-else :src="item.src" alt="默认图片" v-show="datas.navigationType === 0"
			 			:style="{ 'border-radius': datas.img_borderRadius + '%' , 'width': datas.imgSize + 'vh', 'height': datas.imgSize + 'vh'  }" />
			-->
				<!-- 文字 -->
				<view>
					<text style="margin-left: 20rpx;" :style="{
						color: datas.textColor,
						textAlign:datas.titleType=='right'?'left':'center',
						'font-size': datas.textSize + 'px',
						height: datas.textHeight + 'px',
						'line-height': datas.textHeight + 'px',
					}">{{ item.text }}</text>

					<!-- <text class="title2" :style="{
						color: datas.text2Color,
						textAlign:datas.titleType=='right'?'left':'center',
						'font-size': datas.text2Size + 'px',
						height: datas.text2Height + 'px',
						'line-height': datas.text2Height + 'px',
					}" v-if="datas.title2=='1' && (datas.titleType === 'down' || datas.titleType === 'right')">{{ item.text2 }}</text> -->
				</view>

			</view>

		</section>

	</view>
</template>

<script>
	export default {
		name: 'graphicnavigation',
		props: {
			datas: Object,
		},
		data() {
			return {
				mainStyle: "",
				badge_xy: [10, 10],
				badges: [],
			}
		},
		beforeCreate() {
			// this.mainStyle=this.$comm.getCss(this.datas);
		},

		computed: {
			getStyle() {
				if (this.datas) {
					let s = {};
					Object.assign(s, this.datas);
					delete s["image-list"];
					this.mainStyle = this.$comm.getCss(s);
					// console.log("getStyle", this.mainStyle);
				}
				return this.mainStyle;
			}
		},
		created() {

			console.log(this.datas, '--------graphicnavigation')
			// console.log(this.datas.imageList, '--------graphicnavigation')

		},
		methods: {
			badge(index, num) {
				console.log("badge", num);

				let self = this;
				this.$nextTick(() => {
					self.datas.imageList[index].badge = num;

					self.$forceUpdate()
				})
			},
			get_titleType() {
				let t = '0';
				if (this.datas.hasOwnProperty("titleType")) {
					t = this.datas.titleType;
				}
				console.log("get_titleType", t);
				return t;
			},
			is_title2() {
				let t = false;
				if (this.datas.hasOwnProperty("title2")) {
					this.datas.title2 == '1' ? true : false;
				}
				return t;
			},
			get_navstyle(d) {
				let s = {
					width: this.datas.imgStyle === 0 ? '18%' : 375 / this.datas.showSize - 5 + 'rpx',
					backgroundColor: this.datas.itembgColor,
					boxShadow: this.datas.itemBoxShow,
					// border: this.datas.itemBorder != '' ?
					// 	'1px ' + this.datas.itemBorder + ' ' + this.datas.itemBorderColor : '',
					borderRadius: this.datas.itemborderRadius != 0 ? this.datas.itemborderRadius + 'rpx' : '0',
				}
				// if (this.datas.imgStyle == 0) {
				//   s["margin"] = 'unset'
				// }
				// console.log(s);
				return s;
			},

			click(index) {
				let self = this
				console.log("graphicnavigation->click", this.datas.imageList[index])

				if (!this.datas.imageList[index].http.externalLink) {
					this.$boya.msg('敬请期待')
				} else {
					this.$emit("nav", {
						type: "magiccube",
						data: this.datas.imageList[index]
					});
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.graphicnavigations {
		position: relative;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		font-weight: bold;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		box-shadow: 3rpx 0 8rpx rgba(0, 0, 0, 0.2);

		.defaultNavigation {
			// overflow-x: scroll;
			justify-content: space-evenly;

			&::-webkit-scrollbar {
				height: 1px;
			}

			&::-webkit-scrollbar-thumb {
				background-color: #155bd4;
			}

			/deep/.el-collapse-item__header,
			/deep/.el-collapse-item__wrap {
				border-bottom: 0 !important;
			}

			.LR_title {
				display: flex !important;
				flex-direction: row !important;

				view {
					padding: 0px 2px;
					min-width: 80px;
				}

				image {
					margin: 0px;
				}

				width: auto !important;
				padding: 5px;
			}

			.LR_title1 {
				display: flex !important;
				flex-direction: row !important;

				image {
					margin: 0px;
				}

				width: 295rpx !important;
			}

			/* 导航 */
			.navigationList {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin: 2px 0px;

				image {
					margin-top: 5px;
					width: 45px;
					height: 45px;
				}

				view {
					font-size: 12px;
					margin-top: 2px;
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					text-align: center;
					box-sizing: border-box;

					text {
						display: block;
					}
				}
			}

			.navigationList1 {
				display: flex;
				align-items: center;
				flex-direction: column;
				margin: 2px 0px;
				background-color: white;
				padding: 20rpx 12rpx;
				margin: 0 13rpx;

				image {
					margin-top: 5px;
					width: 45px;
					height: 45px;
				}

				view {
					font-size: 12px;
					margin-top: 2px;
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					text-align: center;
					box-sizing: border-box;

					text {
						display: block;
					}
				}
			}
		}
	}

	.graphicnavigation {
		position: relative;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		font-weight: bold;
		// font-size: 80rpx;

		/* 默认导航 */
		.defaultNavigation {
			// overflow-x: scroll;
			justify-content: space-evenly;

			&::-webkit-scrollbar {
				height: 1px;
			}

			&::-webkit-scrollbar-thumb {
				background-color: #155bd4;
			}

			/deep/.el-collapse-item__header,
			/deep/.el-collapse-item__wrap {
				border-bottom: 0 !important;
			}

			.LR_title {
				display: flex !important;
				flex-direction: row !important;

				view {
					padding: 0px 2px;
					min-width: 80px;
				}

				image {
					margin: 0px;
				}

				width: auto !important;
				padding: 5px;
			}

			.LR_title1 {
				display: flex !important;
				flex-direction: row !important;

				image {
					margin: 0px;
				}

				width: 295rpx !important;
			}

			/* 导航 */
			.navigationList {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin: 2px 0px;

				image {
					margin-top: 5px;
					width: 45px;
					height: 45px;
				}

				view {
					font-size: 12px;
					margin-top: 2px;
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					text-align: center;
					box-sizing: border-box;

					text {
						display: block;
					}
				}
			}

			.navigationList1 {
				display: flex;
				align-items: center;
				flex-direction: column;
				margin: 2px 0px;
				background-color: white;
				padding: 20rpx 12rpx;
				margin: 0 13rpx;

				image {
					margin-top: 5px;
					width: 45px;
					height: 45px;
				}

				view {
					font-size: 12px;
					margin-top: 2px;
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					text-align: center;
					box-sizing: border-box;

					text {
						display: block;
					}
				}
			}
		}
	}
</style>